<template>
  <!-- 二维码登入 -->
  <div class="erwei">
    <div class="img" v-loading="loading">
      <img width="200px" alt="" :src="qrImg" />
      <i class="mask" v-if="showQrMask" :style="maskBg" @click="updateQr"></i>
      <!-- 写到这里 -->
      <!--  -->
    </div>
    <p>
      <svg aria-hidden="true" class="icon-wx">
        <use xlink:href="#icon-weixin"></use>
      </svg>
      <b>扫描二维码</b>
    </p>
  </div>
</template>
<script>
//引入socket.io
import socketIo from "socket.io-client";
// //引入qrcode
import qrcode from "qrcode";
//引入api
import * as api from "@/api/users";
// // //引入成功和失败扫码遮罩图片
import invalidImg from "@/assets/img/invalidQr.png";
import scanSuccessImg from "@/assets/img/scancode.png";
import storage from "../../utils/storage";
// import http from "@/utils/request"
export default {
  props: {
      storageUserInfo: {
          required: true
      }
  },
  data() {
    return {
      //         //二维码图片
      qrImg: "",
      //         //是否显示遮罩
      showQrMask: false,
      //         //遮罩背景样式
      maskBg: { backgroundImage: ` url(${scanSuccessImg}) ` }, //扫码成功
      // maskBgInvalid: { background:url(invalidImg) } //二维码失效
      loading:true
    };
  },
  created() {
  
    console.log(this.storageUserInfo)
    //建立socket连接
    let io = socketIo("wss://chst.vip");
    // console.log(111)
    // //监听连接的事件
    io.on("connectSuccess", async ({ sid }) => {
      // let res=await api.getQrCodeApi(sid)
      // console.log(res)
     
      //      let {scanCodeUrl:qrcodeUrl}=res.data

      // //     // 通过qrcode插件，生成二维码
      //     qrcode.toDataURL(qrcodeUrl,(err,img)=>{
      //         if(err){
      //             throw err
      //         }
      //         // console.log(img)
      //         this.qrImg=img
      //     })
 // 将sid存到本地
      storage.set("qf-sid", sid);

      this.getQrUrl(sid)
    });
    // //无效二维码
    io.on("invalidCode", (data) => {
      // console.log(data)
      //     //展示遮罩
      this.showQrMask = true;
      //     //显示无效的二维码遮罩样式
      this.maskBg.backgroundImage = `url(${invalidImg})`;
    });
    // //扫码成功
    io.on('scancodeSuccess', async ({ state, wechatCode, msg }) => {
    //    console.log(data)
    //    console.log(wechatCode)
        //扫码成功显示遮罩
        this.showQrMask = true
        this.maskBg.backgroundImage = `url(${scanSuccessImg})`
        if (state) {
            //调用微信登入的接口
            let res = await api.wechatLoginApi(wechatCode);
            //将内容存到本地
            this. storageUserInfo(res.data)
            console.log(res)
            //跳转页面
            this.$router.push("/")
        } else {
            console.error(msg)
        }

    })
  },
  methods: {
      async getQrUrl(sid) {
        // 打开加载动画
        this.loading=true
          //请求获取二维码地址
          let res = await api.getQrCodeApi(sid);
        //   console.log(res)
          let { scanCodeUrl: qrcodeUrl } = res.data;
          //通过qrcode插件,生成二维码
        //   console.log(res)
          qrcode.toDataURL(qrcodeUrl, (err, img) => {
              if (err) {
                  throw err
              }
            //   console.log(img)
              this.qrImg = img;

  //             // //关掉遮罩
              this.showQrMask = false;
              this.loading=false
          })

      },
      //更新二维码地址
      updateQr() {
          //获取本地存储的sid
          let sid = storage.get('qf-sid')
          console.log(sid)
          this.getQrUrl(sid)
      }
  }
};
</script>
<style scoped lang="less">
//样式设置不上的情况,解决方案
//1.检查类名是否正确
//2.检查权重是否正确
//3.检查是否需要穿透
.icon-wx {
  width: 25px !important;
  height: 25px !important;
  vertical-align: -7px;
  margin-right: 3px;
}

.login-container {
  text-align: center;
  color: #fff;

  .common-login {
    padding-right: 50px;
  }

  //二维码样式
  .erwei .img {
    display: inline-block;
    position: relative;
    width: 200px;
    height: 200px;

    img {
      position: absolute;
      left: 0;
    }

    .mask {
      width: 100%;
      height: 100%;
      opacity: 0.8;
      background-color: #fff;
      position: absolute;
      left: 0;
      // background-image: url("../../assets/img/scancode.png");
      background-size: 50%;
      background-repeat: no-repeat;
      background-position: center;
      cursor: pointer;
    }
  }

  .jiaobiao {
    font-size: 60px;
    color: #fff;
    position: absolute;
    right: -1px;
    top: -1px;
    cursor: pointer;
    opacity: 0.7;
  }

  .video {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
  }

  .bg2 {
    background-image: url("../../assets/img/bg2.png");
    background-repeat: no-repeat;
    position: fixed;
    width: 20%;
    height: 40%;
    background-size: 100% 100%;
    left: 20%;
    top: 40%;
    opacity: 0.5;
  }

  .el-form {
    position: fixed;
    right: 10%;
    top: 25%;
    border-radius: 5px;
    width: 400px;
    background-color: rgba(0, 0, 0, 0.3);
    padding: 100px 0 50px 0;

    /deep/ .el-input__inner {
      width: 250px;
    }

    /deep/ .el-button--primary {
      background: linear-gradient(90deg, #1596fb, #002dff);
      width: 250px;
    }

    /deep/ .el-form-item__label {
      color: #fff;
    }

    .title {
      margin: 0 0 60px 0;
      text-align: center;
      color: #fff;
    }

    /deep/ .captcha {
      width: 100px;
      vertical-align: top;

      .el-input__inner {
        width: 100%;
        height: 45px;
        border-radius: 5px 0 0 5px;
        border: 0;
        font-size: 18px;
      }
    }

    svg path {
      stroke: red;
    }

    .captcha-svg {
      background: #fff;
      display: inline-block;
      height: 45px;
      width: 150px;
      text-align: center;
      cursor: pointer;
      border: 0;
      border-radius: 0px 5px 5px 0;
    }

    .el-form-item__content {
      margin-left: 30px !important;
      width: 250px !important;
    }
  }
}

.sms {
  margin-left: -15px !important;
  width: 250px !important;
}

.smsContainer {
  padding-right: 20px !important;
  width: 89%;

  /deep/ .el-form-item__label {
    // margin-left: 80px !important
    padding: 0 !important;
    padding-right: 10px !important;
  }

  /deep/ .phone {
    width: 140px !important;
  }

  /deep/ .captcha-svg {
    width: 115px !important;
  }

  /deep/ .el-form-item__content {
    margin: 0;
  }
}

// .smsContainer{
// 	width:300px;
// }
</style>
